<template>
<div class="site header-style-one">

<!-- Preloader -->
 
<!-- Preloader End -->

<!-- Mobile Menu -->
<div class="mobile-menu-container">
    <div class="mobile-menu-close"></div>
    <div id="mobile-menu-wrap"></div>
</div>
<!-- Mobile Menu End -->

<!-- Sidebar Toggle Area -->
<div class="toggle-bg"></div>
<div class="toggle-cart-products">
    <div class="toggle-close">x</div>
    <div class="widget_shopping_cart">
        <div class="widget_shopping_cart_content">
            <ul class="product_list_widget ">
                <li class="woocommerce-mini-cart-item mini_cart_item">
                    <a href="#" class="remove_from_cart_button">×</a>
                    <a href="#">
                        <img src="assets/images/shop/cart-product-1.jpg" alt="Product Image">
                        Flower With Vase
                    </a>
                    <span class="quantity">1 × $18.00</span>
                </li>

                <li class="woocommerce-mini-cart-item mini_cart_item">
                    <a href="#" class="remove_from_cart_button">×</a>
                    <a href="#">
                        <img src="assets/images/shop/cart-product-2.jpg" alt="Product Image">
                        Fruit With Basket
                    </a>
                    <span class="quantity">1 × $22.00</span>
                </li>

                <li class="woocommerce-mini-cart-item mini_cart_item">
                    <a href="#" class="remove_from_cart_button">×</a>
                    <a href="#">
                        <img src="assets/images/shop/cart-product-3.jpg" alt="Product Image">
                        Fertilizer Bag
                    </a>
                    <span class="quantity">1 × 48.00</span>
                </li>

                <li class="woocommerce-mini-cart-item mini_cart_item">
                    <a href="#" class="remove_from_cart_button">×</a>
                    <a href="#">
                        <img src="assets/images/shop/cart-product-4.jpg" alt="Product Image">
                        Hand Shovel
                    </a>
                    <span class="quantity">1 × $18.00</span>
                </li>
            </ul>

            <p class="woocommerce-mini-cart__total">
                Subtotal:
                <span class="amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>126.00</bdi></span>
            </p>

            <p class="woocommerce-mini-cart__buttons">
                <a href="#">View cart</a>
                <a href="#">Checkout</a>
            </p>
        </div>
    </div>
</div>
<!-- Sidebar Toggle Area End -->

<!-- Header Area -->
<header class="header-area site-header">
    <div class="header-top-area">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <div class="top-info">
                        <ul class="cvt-list-style cvt-list-inline">
                            <li><i class="flaticon-place"></i> Obere Haltenstrasse Switzerland </li>
                            <li><i class="flaticon-email"></i><a href="mailto:admin@carnivaltheme.com">admin@carnivaltheme.com</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-5 text-right">
                    <div class="top-menu-and-cart cvt-list-style cvt-list-inline">
                        <ul class="menu">
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Terms & Conditions</a></li>
                            <li><a href="#">Help Center</a></li>
                        </ul>

                        <div class="header-mini-cart">
                            <i class="flaticon-shopping-basket"></i>
                            <span class="cart-product-count">4</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main-menu-area">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-2 col-md-4 col-5">
                    <div class="site-branding">
                        <a href="index.html">
                            <img src="assets/images/logo/logo-one.png" alt="onland">
                        </a>
                    </div>
                </div>

                <div class="col-lg-10 col-md-8 col-7 d-flex align-items-center justify-content-end">
                    <div class="header-navigation-area">
                        <nav class="main-navigation">
                            <div class="main-menu-container">
                                <ul id="main-menu" class="menu">
                                    <li class="menu-item-has-children">
                                        <a href="index.html">Home</a>
                                        <ul class="sub-menu">
                                            <li><a href="index.html">Home One</a></li>
                                            <li><a href="index-2.html">Home Two</a></li>
                                            <li><a href="index-3.html">Home Three</a></li>
                                        </ul>
                                    </li>

                                    <li><a href="about-us.html">About</a></li>

                                    <li class="menu-item-has-children current-menu-ancestor current-menu-item">
                                        <a href="services.html">Services</a>
                                        <ul class="sub-menu">
                                            <li><a href="services.html">Services</a></li>
                                            <li class="current-menu-item"><a href="service-details.html">Service Details</a></li>
                                        </ul>
                                    </li>

                                    <li class="menu-item-has-children">
                                        <a href="projects.html">Projects</a>
                                        <ul class="sub-menu">
                                            <li><a href="projects.html">Projects</a></li>
                                            <li><a href="project-details.html">Project Details</a></li>
                                        </ul>
                                    </li>

                                    <li class="menu-item-has-children">
                                        <a href="blog.html">Blog</a>
                                        <ul class="sub-menu">
                                            <li class="menu-item-has-children">
                                                <a href="blog.html">Blog</a>
                                                <ul class="sub-menu">
                                                    <li><a href="blog.html">Right Sidebar</a></li>
                                                    <li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
                                                    <li><a href="blog-3-column.html">3 Column</a></li>
                                                </ul>
                                            </li>
                                            <li class="menu-item-has-children">
                                                <a href="blog-details.html">Blog Details</a>
                                                <ul class="sub-menu">
                                                    <li><a href="blog-details.html">Right Sidebar</a></li>
                                                    <li><a href="blog-details-left-sidebar.html">Left Sidebar</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>

                                    <li class="menu-item-has-children">
                                        <a href="#">Pages</a>
                                        <ul class="sub-menu">
                                            <li><a href="team.html">Our Team</a></li>
                                            <li><a href="team-details.html">Team Details</a></li>
                                            <li><a href="shop.html">Shop</a></li>
                                            <li><a href="404.html">Error 404</a></li>
                                        </ul>
                                    </li>

                                    <li><a href="contact.html">Contact</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>

                    <div class="header-buttons-area">
                        <ul class="header-buttons-wrapper cvt-list-style d-flex justify-content-end align-items-center">
                            <li>
                                <div class="header-mini-cart">
                                    <i class="flaticon-shopping-basket"></i>
                                    <span class="cart-product-count">4</span>
                                </div>
                            </li>
                            <li class="header-button"><a class="cvt-button cvt-deep-bg" href="tel:123456">Call Now<i class="flaticon-phone-call"></i></a></li>
                            <li class="mobile-menu-trigger"><span></span><span></span><span></span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Header Area End-->

<!-- Site Content Wrapper -->
<div class="site-content">
    <!-- Banner Area -->
    <div class="banner-area" data-background="assets/images/others/banner.jpg">
        <div class="container h-100">
            <div class="row h-100">
                <div class="col-lg-12 my-auto">
                    <div class="banner-content text-left">
                        <h2 class="banner-title">Services Details</h2>
                    </div>

                    <div class="breadcrumb-container">
                        <a href="#" >Home</a> - <a href="#" >Service</a>
                        -
                        <span class="current-item">Services Details</span>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- Banner Area End-->

    <!-- Content Area-->
    <div class="content-area layout-left-sidebar">

        <div class="container">
            <div class="row">
                <div class="col-lg-4 order-lg-0 order-last">
                    <aside class="sidebar-widget-area">
                        <section class="widget widget_search">
                            <h3 class="screen-reader-tex">Search</h3>
                            <form role="search" method="get" class="search-form" action="#">
                                <label for="onland-search-form">
                                    <input type="search" id="onland-search-form" class="search-field" placeholder="Search..." value="" required="" name="s">
                                </label>
                                <button type="submit" class="search-submit"><i class="fas fa-search"></i></button>
                            </form>
                        </section>

                        <section class="widget widget_nav_menu">
                            <h3 class="widget-title">Popular Services</h3>
                            <ul class="menu">
                                <li><a href="#">Lawn Renovation</a></li>
                                <li><a href="#">Flower Scaping</a></li>
                                <li class="current-menu-item"><a href="#">Lawn Maintenance</a></li>
                                <li><a href="#">Rubbish Removal</a></li>
                                <li><a href="#">Watering Garden</a></li>
                            </ul>
                        </section>


                        <section class="widget widget_categories">
                            <h3 class="widget-title">Categories List</h3>
                            <ul>
                                <li><a href="#">Gardening</a> <span class="post-count-number">(4)</span></li>
                                <li><a href="#">Landscaping</a> <span class="post-count-number">(7)</span></li>
                                <li><a href="#">Garden Fence</a> <span class="post-count-number">(5)</span></li>
                                <li><a href="#">Leaf Removal</a> <span class="post-count-number">(2)</span></li>
                                <li><a href="#">Grass Cutting</a> <span class="post-count-number">(2)</span></li>
                            </ul>
                        </section>

                        <section class="widget widget_tag_cloud">
                            <h3 class="widget-title">Popular Tags</h3>
                            <div class="tagcloud">
                                <a href="#">Planting</a>
                                <a href="#">Fence</a>
                                <a href="#">Soil</a>
                                <a href="#">Garden</a>
                                <a href="#">Landscape</a>
                                <a href="#">Gardener</a>
                                <a href="#">Tree Plant</a>
                                <a href="#">Grass Cutting</a>
                                <a href="#">Branch Cutting</a>
                            </div>
                        </section>

                        <section class="widget widget_cta_button_widget">
                            <div class="cta-widget-wrapper">
                                <div class="cta-widget-content cvt-cover-bg" data-background="assets/images/team/member-9.jpg">
                                    <h3 class="cta-widget-title">Make a call for any type of query.</h3>
                                    <a href="tel:410-123-456-789" class="cta-widget-button"><i class="fas fa-phone-volume"></i></a>
                                    <div></div>
                                    <a href="tel:410-123-456-789" class="cta-widget-number">+410 123 456 789</a>
                                    <div class="cta-widget-overlay"></div>
                                </div>
                            </div>
                        </section>
                    </aside>
                </div>

                <div class="col-lg-8">
                    <div class="cvt-service-details-content">
                        <h1>Lawn Maintenance.</h1>

                        <p>
                            Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been to the industry's
                            standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled it to make
                            a type specimen book when an unknown printer took a galley of type and scrambled it make a type specimen book.
                            It has survived not only five centuries.
                        </p>
                        
                        <div class="cvt-service-details-slider-wrapper">
                            <img src="assets/images/services/service-details-slide-1.jpg" alt="service details image">
                            <img src="assets/images/services/service-details-slide-2.jpg" alt="service details image">
                            <img src="assets/images/services/service-details-slide-3.jpg" alt="service details image">
                        </div>

                        <h2>How To Start?</h2>

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                            standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled it to make
                            a type specimen book when an unknown printer took a galley of type and scrambled it make a type specimen book.
                            It has survived not only five centuries.
                        </p>

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                            standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled it to make
                            a type specimen book when an unknown printer took a galley of type and scrambled it make a type specimen book.
                            It has survived not only five centuries.
                        </p>

                        <div class="row service-details-list">
                            <div class="col-lg-5 col-md-5">
                                <img src="assets/images/services/service-details-image.jpg" alt="Service Details">
                            </div>

                            <div class="col-lg-7 col-md-7">
                                <h2>Why Choose Us?</h2>
                                <ul class="cvt-list-style">
                                    <li><i class="fas fa-check"></i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lrem Ipsum has been the standard dummy text centuries.</li>

                                    <li><i class="fas fa-check"></i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lrem Ipsum has been the standard dummy text centuries.</li>

                                    <li><i class="fas fa-check"></i>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lrem Ipsum has been the standard dummy text centuries.</li>

                                    <li><i class="fas fa-check"></i>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                                </ul>
                            </div>
                        </div>

                        <h2>The Amazing Benefits</h2>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                            standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it make a type specimen book. It has survived not only five centuries.
                        </p>

                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                            standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled it to make a type specimen book when an unknown printer took a galley of type and scrambled it make a type specimen book. It has survived not only five centuries.
                        </p>

                        <div class="cvt-accordion-wrapper">

                            <h2>Frequently Asked Question.</h2>

                            <div class="accordion" id="cvt-accordion">

                                <div class="card">
                                    <div class="card-header ">
                                        <span class="card-title">
                                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
                                                01. How to get your services?
                                            </button>
                                        </span>
                                    </div>

                                    <div id="collapse-1" class="collapse" data-parent="#cvt-accordion">
                                        <div class="card-body">
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has to been the standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled a type specimen book when an unknown printer took.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-header active">
                                        <span class="card-title">
                                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false">
                                                02. What payment methods are available?
                                            </button>
                                        </span>
                                    </div>

                                    <div id="collapse-2" class="collapse" data-parent="#cvt-accordion">
                                        <div class="card-body">
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has to been the standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled a type specimen book when an unknown printer took.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                    <div class="card-header active">
                                        <span class="card-title">
                                            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="true">
                                                03. Do you works on weekend?
                                            </button>
                                        </span>
                                    </div>

                                    <div id="collapse-3" class="collapse show" data-parent="#cvt-accordion">
                                        <div class="card-body">
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has to been the standard dummy text ever since the 1500 when an unknown printer took and galley of type and scrambled a type specimen book when an unknown printer took.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- CTA Section -->
        <section class="cta-section-wrapper cvt-cover-bg" data-background="assets/images/others/cta-bg.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-8">
                        <h3 class="cvt-cta-text">We Have Solutions For Your Garden.</h3>
                    </div>

                    <div class="col-xl-4 offset-xl-2 col-lg-4 my-auto text-center">
                        <a href="contact.html" class="cvt-cta-button">Contact Now <i class="flaticon-farmer"></i></a>
                    </div>
                </div>
            </div>
        </section>
        <!-- CTA Section End -->

        <!-- Footer Are -->
        <footer class="site-footer">
            <div class="footer-widget-area cvt-cover-bg">
                <div class="footer-left-image">
                    <img src="assets/images/footer/footer-left-image.png" alt="">
                </div>

                <div class="container">
                    <div class="row">
                        <div class="widget col-lg-3 col-md-0 td_blank_widget"></div>
                        <div class="widget col-lg-3 col-md-6 widget_nav_menu">
                            <h4 class="widget-title">Quick Links</h4>

                            <ul class="menu">
                                <li><a href="about-us.html">About Us</a></li>
                                <li><a href="contact.html">Contact Us</a></li>
                                <li><a href="team.html">Our Team</a></li>
                                <li><a href="services.html">Our Services</a></li>
                                <li><a href="projects.html">Our Projects</a></li>
                                <li><a href="#">Privacy Policy</a></li>
                                <li><a href="#">Our Terms</a></li>
                            </ul>
                        </div>

                        <div class="widget col-lg-3 col-md-6 widget_td_contact_info_widget">
                            <h4 class="widget-title">Contact Info</h4>

                            <div class="cvt-widget-short-desc">
                                <p>Visit our office or connect us via Phone and Email.</p>
                            </div>

                            <ul class="cvt-list-style widget-contact-info-list">
                                <li class="widget-address-desc">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <div class="widget-addr-dsc">
                                        <p>Obere Haltenstrasse, Lugaggia. Switzerland - 6953</p>
                                    </div>
                                </li>

                                <li><a href="tel:+410123456789"><i class="fas fa-mobile-alt"></i>+410 123 456 789</a></li>

                                <li><a href="mailto:admin@carnivaltheme.com"><i class="fas fa-paper-plane"></i>admin@carnivaltheme.com</a></li>
                            </ul>

                        </div>

                        <div class="widget col-lg-3 col-md-6 td_gallery_widget">
                            <h4 class="widget-title">Photo Gallery</h4>

                            <div class="cvt-gallery-photo-wrapper">
                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-one.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-one.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-two.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-two.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-three.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-three.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-four.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-four.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-five.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-five.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-six.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-six.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-seven.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-seven.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-eight.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-eight.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>

                                <a class="cvt-gallery-photo-url cvt-popup-image" href="assets/images/footer/gallery-nine.jpg">
                                    <div class="cvt-gallery-photo-item" data-background="assets/images/footer/gallery-nine.jpg">
                                        <div class="cvt-gallery-photo-overlay cvt-transition">
                                            <div class="cvt-gallery-photo-plus">+</div></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-bottom-area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 col-md-6">
                            <div class="footer-social-icon social-icons">
                                <ul class="cvt-list-style cvt-list-inline">
                                    <li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-pinterest-p"></i></a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6">
                            <div class="site-copyright-text">
                                &copy; OnLand 2021 | All Right Reserved
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scroll-to-top"><i class="flaticon-leaf"></i></div>
        </footer><!-- Footer Area End -->
    </div><!-- Content Area End -->
</div><!-- Site Content Wrapper End -->
</div>
</template>
<script setup lang="ts">
import {ref,reactive} from "vue"




</script>
<style lang="scss" scoped>




</style>